<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        /*
   块级元素：元素占据一整行 div, p , h1-h6,ul,li,
   行内元素：元素不跨行 :  a ,img ,span ,label,input,button


    块级元素:可以设置宽度与高度,display :block
    行内元素：不能设置宽度与高度 ,display:inline

    间距：
    （1）内间距 padding
    （2）外间距 margin :元素本身与 其他外部的元素 保持的间距
        */
        .d1{
            width: 800px;
            height: 600px;
            border: 1px dashed black;
        }
        .d2 img{
            width: 200px;
            height: 200px;
            background-color: salmon;
        }

        .d3{
            width: 300px;
            height: 300px;
            background-color: seagreen;
            margin: 10px; /*外间距*/
            padding: 10px; /*内间距*/
        }

        .a1{
            width: 300px;
            height: 300px;
            background-color: seagreen;
        }
    </style>
</head>
<body>

    <div class="d1">
        <div class="d2">
            <img src="image/1.jpg">
        </div>
    </div>
    </div>
    <div class="d3">
        <span>大众点评</span>
    </div>
    </div>

    <a href="" class="a1">百度一下</a>
</body>
</html>